<template>
  <div>
    <div>
      <Button :size="buttonSize" type="primary" @click="add">新增菜单</Button>
    </div>
    <Table border :columns="columns7" :data="data6" />
    <Page :total="total" show-total show-elevator :page-size="searchData.pageSize" :current="searchData.pageCurrent" prev-text="上一页" next-text="下一页" @on-change="add()" />

    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus] == 'update' ? '修改' : '新增'" :visible.sync="dialogFormVisible">
      <Form ref="temp" :model="temp" :label-width="80" :rules="rules">
        <FormItem>
          <Upload
            v-model="temp.pictureUrl"
            multiple
            type="drag"
            :action="uploadUrl"
            :format="['jpg','jpeg','png']"
            :max-size="2048"
            :on-success="fileSuccess"
          >
            <div style="padding: 20px 0">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff" />
              <p>Click or drag files here to upload</p>
            </div>
          </Upload>
        </FormItem>
        <FormItem label="列表" prop="ids">
          <Select v-model="temp.ids">
            <Option v-for="item in webList" :key="item.id" :value="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="commit">提交</Button>
          <Button style="margin-left: 8px" @click="dialogFormVisible = false">退出</Button>
        </FormItem>
      </Form>
    </el-dialog>
  </div>
</template>
<script>
import { getWebList } from '@/api/left-article'
import { getDate, setSuggest } from '@/utils/dateUtile'
import { getPageSlideShow, getSlideShowById, delSlideShow, updateSlideShow, saveSlideShow } from '@/api/slideshow_request'
export default {
  data() {
    return {
      datetime: 'yyyy:MM:dd:',
      uploadUrl: ' http://localhost:5001/fastDfs/uploadUrl',
      temp: {
        id: undefined,
        ids: '',
        pictureUrl: ''
      },
      webList: [],
      total: 1,
      dialogFormVisible: false,
      dialogStatus: '',
      rules: {
        ids: [{ required: true, message: '必填', trigger: 'change' }],
        pictureUrl: [{ required: true, message: '必填', trigger: 'change' }]
      },
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      searchData: {
        pageSize: 10,
        pageCurrent: 1
      },
      pageSizeOpts: [10, 20],
      buttonSize: 'large',
      columns7: [
        {
          title: '列表名称',
          key: 'ids',
          render: (h, params) => {
            for (var i = 0; this.webList.length > i; i++) {
              if (this.webList[i].id === params.row.ids) {
                return h('div', [
                  h('Icon', {
                    props: {
                      type: 'person'
                    }
                  }),
                  h('strong', this.webList[i].name)
                ])
              }
            }
            return ''
          }
        },
        {
          title: '图片路径',
          key: 'pictureUrl'
        },
        {
          title: '创建时间',
          key: 'startTime',
          render: (h, params) => {
            return h('div', {}, getDate(params.row.startTime))
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 400,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    console.log(params)
                    this.show(params.index)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.delete(params.row.id)
                  }
                }
              }, '删除'),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.update(params.row.id)
                  }
                }
              }, '修改')
            ])
          }
        }
      ],
      data6: [

      ]
    }
  },
  created() {
    getWebList().then(response => {
      this.webList = response.data
    })
    this.createList()
  },
  methods: {
    createList: function() {
      this.data6 = []
      getPageSlideShow(this.searchData).then(response => {
        console.log(response)
        var dataObj = response.data
        this.total = dataObj.pageShowTotal
        this.searchData.pageSize = dataObj.pageSize
        this.searchData.pageCurrent = dataObj.pageCurrent + 1
        for (let i = 0; dataObj.pageList.length > i; i++) {
          this.data6.push(dataObj.pageList[i])
        }
      })
    },
    fileSuccess(event, file, fileList) {
      this.temp.pictureUrl = event.data
    },
    show(index) {
      this.$Modal.info({
        title: '查看',
        content: `列表路径：${this.data6[index].pictureUrl}}`
      })
    },
    delete(index) {
      this.$Modal.confirm({
        title: '提示',
        content: '是否确定删除',
        onOk: () => {
          delSlideShow(index).then(response => {
            console.log(response)
            setSuggest(this.$Modal, '提示信息', '删除成功')
            this.select()
            this.$router.go(0)
          }).catch(err => {
            console.log(err)
            setSuggest(this.$Modal, '提示信息', '删除失败')
          })
        },
        onCancel: () => {
          this.$Message.info('已取消')
        }
      })
    },
    select() {
      this.createList()
    },
    update(index) {
      this.temp = {}
      getSlideShowById(index).then(response => {
        this.temp = response.data
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
      }).catch(error => {
        console.log(error)
        setSuggest(this.$Modal, '错误信息', '查询失败')
      })
      console.log(this.temp)
      console.log(this.dialogStatus)
    },
    search() {
      this.select()
    },
    commit() {
      console.log(this.temp)
      if (this.dialogStatus === 'create') {
        saveSlideShow(this.temp).then(response => {
          setSuggest(this.$Modal, '提示信息', '保存成功')
          this.select()
          this.dialogStatus = ''
          this.dialogFormVisible = false
          this.$router.go(0)
        }).catch(error => {
          console.log(error)
          setSuggest(this.$Modal, '提示信息', '保存失败')
        })
      } else if (this.dialogStatus === 'update') {
        updateSlideShow(this.temp).then(response => {
          setSuggest(this.$Modal, '提示信息', '修改成功')
          this.select()
          this.dialogStatus = ''
          this.dialogFormVisible = false
          this.$router.go(0)
        }).catch(error => {
          console.log(error)
          setSuggest(this.$Modal, '提示信息', '修改失败')
        })
      }
    },
    add() {
      this.temp = {}
      // console.log(this.temp)
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    }
  }
}
</script>
